<template>
  <div class="songlist_box">
    <div v-if="songlist" class="songlist_item">
      <div class="img-box">
        <img style="cursor: pointer"
             @click="goDetail"
             :src="songlist.coverImgUrl" alt=""
        >
        <div class="updateTime">
          {{songlist.updateTime | filterDate}}
        </div>
      </div>
      <div>
        <table id="table">
          <tr
            class="detail-info"
            :class="{ active: currentIndex === index }"
            v-for="(item, index) in songlist.tracks"
            v-if="index <= 4"
            :key="index"
            @dblclick="addSong(index)"
            @click="trClick(index)"
          >
            <td class="other">
              <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) === -1"
                src="~@/assets/img/songlistdetail/collect2.svg"
                alt=""
              />
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) !== -1"
                src="~@/assets/img/songlistdetail/collect3.svg"
                alt=""
              />
              <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
            </td>
            <td class="title"
                :class="{dbActive: $store.state.playContent.playId === item.id}">
              {{ item.name }}
            </td>
            <td class="time">{{item.ar[0].name}}</td>
          </tr>
        </table>
        <p @click="goDetail"
           style="cursor: pointer;
                  font-size: 13px;
                  line-height: 30px;
                  margin-left: 8px">
          查看全部 >
        </p>
      </div>
    </div>

  </div>
</template>

<script>
// import { home } from "@/network/home";
import { formatDate } from '@/components/common/utilis'


export default {
  name: "TopHeaderItem",
  props:{
    // songlistId:{
    //   type:Number,
    // },
    songlist:{
      type:Object,
    },
  },
  data(){
    return {
      spanIndex: [], //保存歌曲的索引（用于点赞和取消点赞）
      currentIndex: "", //单击相应歌曲背景颜色改变
      // songlist:{},
    }
  },
  created() {
    //获取歌单详情
    // this.getSonglistDetail(this.songlistId)
  },
  filters:{
    // 格式化歌单更新时间
    filterDate(value){
      const date = new Date(value)
      return formatDate(date,'MM月dd日更新')
    },
  },
  methods:{
    //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
    btnClick(index) {
      let result = this.spanIndex.indexOf(index);
      if (result === -1) {
        this.spanIndex.push(index);
      } else this.spanIndex.splice(result, 1);
    },
    //点击tr改变背景颜色的方法
    trClick(index) {
      this.currentIndex = index;
    },
    //双击添加歌曲信息的方法
    addSong(index) {
      const songContent = {};
      songContent.playId = this.songlist.tracks[index].id;
      songContent.playImg = this.songlist.tracks[index].al.picUrl;
      songContent.playName = this.songlist.tracks[index].name;
      songContent.player = this.songlist.tracks[index].ar[0].name;
      songContent.a = ''
      this.$store.commit("addSongs", songContent);
    },
    //跳转到详情页
    goDetail(){
      this.$router.push('/songlist/detail/id=' + this.songlist.id)
    },

    //获取歌单详情数据的函数(已修改，在这里请求数据很慢，修改为直接让父组件传过来)
    // getSonglistDetail(id){
    //   home.getSonglistDetail(id).then(res => {
        // this.songlist = res.data.playlist
      // })
    // },
  },
}
</script>

<style scoped>
.songlist_box{
  padding: 30px 10px 10px 50px;
}
/*左边盒子*/
.songlist_item{
  display: flex;
  justify-content: space-between;
}
.songlist_item .img-box img{
  width: 180px;
  height: 180px;
  border-radius: 4px;
}
.songlist_item .img-box .updateTime{
  position: relative;
  color: white;
  top: -64px;
  left: 45px;
  font-size: 13px;
}
/*右边盒子*/
table {
  font-size: 13px;
}
table tr:nth-child(odd) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  line-height: 33px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.title-info td {
  font-size: 14px;
  color: #959090;
}
.other {
  width: 100px;
  color: #959090;
  padding-left: 8px;
}
.other img {
  position: relative;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 6px;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 500px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.time {
  width: 100px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
</style>
